<template>
    <div class="w-100 h-90">
        <div class="w-100 h-90 d-flex  flex-wrap " >
     <div class="contain"   v-for="(item,index) in videoList" >
        <!-- <video src=""
        autoplay
        muted
        width="200"
        height="100"
        :id="'video-container-' + index"
        :key="index"
        ></video> -->
        <img :src="img" alt=""  style="width: 100%; height: 80px; margin-top: 20px" >
        <div class="fakeV"></div>
        <div>
            {{ item.name }}
        </div>
     </div>

     </div>
    </div>
   
</template>
    
<script setup lang='ts'>
import flvjs from 'flv.js';
import img from '@/assets/image/underGround/station.png'
    const videoList:any=[
    {
          rtsp: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv ",
          player: null,
          name:'ACU01-供电舱监控'
        },
        {
          rtsp: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv ",
          player: null,
          name:'ACU02-电力舱监控'
        }, {
          rtsp: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv ",
          player: null,
          name:'ACU03-热力舱监控'
        }, {
          rtsp: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv ",
          player: null,
          name:'ACU04-燃气舱监控'
        }, {
          rtsp: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv ",
          player: null,
          name:'ACU05-供电舱监控'
        }, {
          rtsp: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv ",
          player: null,
          name:'ACU06-供电舱监控'
        },
    ]
    const   initVideoPlayer=(item:any, index:any)=>{
if (flvjs.isSupported()) {
        let  videoElement:any =(document as any). getElementById('video-container-' + index)
        const flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            isLive: true,
            hasAudio: false,
            url: item.rtsp
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true //自动清除缓存
          }
        );

        flvPlayer.attachMediaElement(videoElement);
        // this.flvPlayer.load();

        if (item.rtsp !== "" && item.rtsp !== null) {
          flvPlayer.load();
        flvPlayer.play();
        }

}
    }
        onMounted(() => {
//   videoList.forEach((item:any, index:any) => {
//     initVideoPlayer(item, index);
//   });
});
</script>
    
<style scoped lang="scss" >
    .contain{
     height: 120px;
     width: 33%;
     box-sizing: border-box;
     padding: 20px;
     font-family: 'DIN';
     font-size: 20px;
     color:rgba(3, 230, 254, 1) ;
     video {
        width: 200px;
        height: 100px;
     }
    }
  
</style>